---
type: tutorial
title: Construa sua primeira ilha Astro
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Utilize um componente Preact para saudar seus visitantes com uma mensagem randomicamente selecionada
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';

Utilize um componente Preact para saudar seus visitantes com uma mensagem randomicamente selecionada!

<PreCheck>
  - Adicionar Preact ao seu projeto Astro
  - Incluir ilhas Astro (componentes Preact `.jsx`) em sua página inicial
  - Utilizar diretivas `client:` para fazer ilhas interativas
</PreCheck>

## Adicione Preact ao seu projeto Astro

<Steps>
1. Se ele estiver executando, feche o servidor de desenvolvimento para ter acesso ao terminal (atalho de teclado: <kbd>Ctrl + C</kbd>).

2. Adicione a habilidade de utilizar componentes Preact em seu projeto Astro com um único comando:

    <PackageManagerTabs>
      <Fragment slot="npm">
        ```sh
        npx astro add preact
        ```
      </Fragment>
      <Fragment slot="pnpm">
        ```sh
        pnpm astro add preact
        ```
      </Fragment>
      <Fragment slot="yarn">
        ```sh
        yarn astro add preact
        ```
      </Fragment>
    </PackageManagerTabs>

3. Siga as instruções da linha de comando para confirmar a adição do Preact ao seu projeto.
</Steps>


## Inclua um banner de saudação com Preact

Esse componente irá receber um array de mensagens de saudação como uma prop e randomicamente selecionar uma delas para mostrar uma mensagem de boas-vindas. O usuário pode clicar em um botão para conseguir uma nova mensagem randômica.

<Steps>
1. Crie um novo arquivo em `src/components/` chamado `Greeting.jsx`

    Note a extensão de arquivo `.jsx`. Este arquivo será escrito em Preact, não Astro.

2. Adicione o seguinte código para `Greeting.jsx`:

    ```jsx title="src/components/Greeting.jsx"
    import { useState } from 'preact/hooks';

    export default function Greeting({messages}) {

      const randomMessage = () => messages[(Math.floor(Math.random() * messages.length))];
      
      const [greeting, setGreeting] = useState(messages[0]);

      return (
        <div> 
          <h3>{greeting}! Obrigado por visitar!</h3>
          <button onClick={() => setGreeting(randomMessage())}>
            Nova Saudação
          </button>
        </div>
      );
    }
    ```

3. Importe e utilize esse componente em sua página inicial `index.astro`.

    ```astro title="src/pages/index.astro" ins={3,8}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Página Inicial";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>O subtítulo incrível do meu blog</h2>
      <Greeting messages={["Oi", "Olá", "Coé", "E aí"]} />
    </BaseLayout>
    ```

    Verifique a pré-visualização no seu navegador: você deve ver uma saudação aleatória, mas o botão não irá funcionar!


4. Adicione um segundo componente `<Greeting />` com a diretiva `client:load`.

    ```astro title="src/pages/index.astro" ins={9} "client:load"
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import Greeting from '../components/Greeting';
    const pageTitle = "Página Inicial";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <h2>O subtítulo incrível do meu blog</h2>
      <Greeting messages={["Oi", "Olá", "Coé", "E aí"]} />
      <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
    </BaseLayout>
    ```

  5. Revisite sua página e compare os dois componentes. O segundo botão funciona pois a diretiva `client:load` diz ao Astro para enviar e executar novamente o JavaScript no _cliente_ quando a página _carrega_, fazendo o componente interativo. Isso é chamado componente **hidratado**.
  
  6. Quando a diferença ficar clara, remova o componente Saudação não-hidratado.


      ```astro title="src/pages/index.astro" del={8} "client:load"
      ---
      import BaseLayout from '../layouts/BaseLayout.astro';
      import Greeting from '../components/Greeting';
      const pageTitle = "Página Inicial";
      ---
      <BaseLayout pageTitle={pageTitle}>
        <h2>O subtítulo incrível do meu blog</h2>
        <Greeting messages={["Oi", "Olá", "Coé", "E aí"]} />
        <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
      </BaseLayout>
      ```
</Steps>

<Box icon="question-mark">

### Analise o Padrão

Há outras diretivas `client:` para explorar. Cada uma envia JavaScript ao cliente em momentos diferentes. `client:visible`, por exemplo, irá apenas enviar o JavaScript do componente quando ele é visível na página.

Considere um componente Astro com o seguinte código:

```astro
---
import LayoutBase from '../layouts/LayoutBase.astro';
import BannerAstro from '../components/BannerAstro.astro';
import BannerPreact from '../components/BannerPreact';
import ContadorSvelte from '../components/ContadorSvelte.svelte';
---
<LayoutBase>
  <BannerAstro />
  <BannerPreact />
  <BannerPreact client:load />
  <ContadorSvelte />
  <ContadorSvelte client:visible />
</LayoutBase>
```

1. Quais dos cinco componentes serão ilhas **hidratadas**, enviando JavaScript ao cliente?

    <p>
      <Spoiler>`<BannerPreact client:load />` e `<ContadorSvelte client:visible />` serão ilhas hidratadas.</Spoiler>
    </p>

2. De que forma(s) os dois componentes `<BannerPreact />` serão o mesmo? De que forma(s) eles serão diferentes? 

    <p>
      <Spoiler>**Igual**: Ambos mostram os mesmos elementos HTML e parecem o mesmo inicialmente. **Diferente**: O componente com a diretiva `client:load` será executado novamente após a página ser carregada, e quaisquer elementos interativos que ele tem irão funcionar.</Spoiler>
    </p>

3. Assuma que o componente `ContadorSvelte` mostra um número e tem um botão para aumentá-lo. Se você não pudesse ver o código do seu website, apenas a página publicada ao vivo, como você diria qual dos dois componentes `<ContadorSvelte />` usaram `client:visible`? 

    <p>
      <Spoiler>Tente clicar no botão, e veja qual é interativo. Se ele responde a sua interação, ele deve ter uma diretiva `client:`.</Spoiler>
    </p>
</Box>



<Box icon="question-mark">

### Teste seu conhecimento

Para cada um dos seguintes componentes, identifique o que será enviado ao navegador:

1. `<ContadorReact client:load />`

    <MultipleChoice>
      <Option>
        Apenas HTML e CSS 
      </Option>
      <Option isCorrect>
        HTML, CSS e JavaScript
      </Option>
    </MultipleChoice>

2. `<CartaoSvelte />`

    <MultipleChoice>
      <Option  isCorrect>
        Apenas HTML e CSS
      </Option>
      <Option>
        HTML, CSS e JavaScript
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Eu posso instalar uma integração Astro.
- [ ] Eu posso escrever componentes de frameworks de UI em sua própria linguagem.
- [ ] Eu posso utilizar uma diretiva `client:` para hidratar meu componente de framework de UI.
</Checklist>
</Box>

### Recursos

- [Guia de Integrações Astro](/pt-br/guides/integrations-guide/)

- [Utilizando Componentes de Frameworks de UI no Astro](/pt-br/guides/framework-components/#using-framework-components)

- [Referência de diretivas de cliente do Astro](/pt-br/reference/directives-reference/#client-directives)
